@ts-nocheck
<template>
  <el-switch
    class="switcher"
    v-model="commonStore.darkMode"
    inline-prompt
    style="--el-switch-on-color: #626aef; --el-switch-off-color: #409eff"
    active-text="暗"
    inactive-text="亮"
    @click.stop="handleClick"
  />
</template>

<script setup>
import { onMounted, ref, computed, reactive } from "vue";
import { useDark, useToggle } from "@vueuse/core";
import useCommonStore from "@/store/common";
const commonStore = useCommonStore();
const isDark = useDark();
const toggleDark = useToggle(isDark);
function handleClick() {
  toggleDark();
  commonStore.setDarkMode(isDark.value);
}
onMounted(() => {
  commonStore.setDarkMode(isDark.value);
  isDark.value ? null : handleClick();
});
</script>

<style scoped>
.switcher-button {
  padding: 12px;
  width: 24px;
  height: 24px;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.switcher-button:hover {
  transform: scale(1.1);
}

.switcher {
  margin: 3px 0 0 12px;
  transform: scale(0.95);
}
</style>
